<template>
  <view class="myInfo">
    <view
      class="headBox"
      :style="{
        height: platform == 'H5' ? '390rpx' : '450rpx',
        paddingTop: platform == 'H5' ? '0' : '80rpx',
      }"
    >
      <image
        class="bg-image"
        src="/static/userBg.jpg"
        mode="scaleToFill"
      ></image>

      <!-- 用户信息 -->
      <view class="user-info">
        <view class="user-avatar" @click="handlePersonal()">
          <u-avatar size="45" :src="userInfo.avatarUrl"></u-avatar>
        </view>
        <view class="user-content">
          <!-- 会员昵称 -->
          <view class="nick-name oneline-hide" @click="handlePersonal()">{{
            userInfo.name
          }}</view>
          <!-- 会员无等级时显示手机号 -->
          <view class="mobile">
            <u-icon color="#eee" name="phone-fill"></u-icon>
            <text>{{ userInfo.mobile }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <!-- 我的工具 -->
      <view class="titleBox">
        <view class="title">我的订单</view>
        <view class="more" @click="more"
          >全部<u-icon name="arrow-right" :size="13" color="#999"></u-icon
        ></view>
      </view>
      <view class="itemBox">
        <u-grid :col="4" :border="false">
          <u-grid-item
            @click="navClick(item)"
            v-for="(item, index) in order"
            :key="index"
          >
            <u-icon :name="item.icon" :size="26"></u-icon>
            <u--text
              align="center"
              margin="10rpx"
              size="12"
              type="info"
              :text="item.word"
            ></u--text>
          </u-grid-item>
        </u-grid>
      </view>
      <view class="titleBox">
        <view class="title">我的工具</view>
      </view>
      <view class="itemBox">
        <u-grid :col="4" align="center" :border="false">
          <u-grid-item
            v-for="(item, index) in moreFun"
            :key="index"
            @click="navClick(item)"
          >
            <u-icon size="26" :name="item.icon"></u-icon>
            <u--text
              align="center"
              margin="10rpx"
              size="12"
              type="info"
              :text="item.word"
            ></u--text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <!-- 退出登录 -->
    <view class="btn">
      <u-button @click="loginOut" color="#FF0000" text="退出登录"></u-button>
    </view>
  </view>
</template>

<script>
import { getUserInfo } from "@/api/home.js";
// import { mapState, mapMutations } from 'vuex';
import global from "@/config/global";
import base from "@/utils/base";
export default {
  computed: {
    // ...mapState(['PrimaryColor','userInfo']),
  },
  data() {
    return {
      // 当前用户信息
      userInfo: {
        avatarUrl: "",
        name: "",
        mobile: "",
      },
      systemInfo: base.systemInfo,
      isVIP: false,
      // 订单
      order: [
        {
          icon: "rmb-circle-fill",
          word: "待付款",
          url: "/pageA/order/index?current=0&orderStatus=1",
        },
        {
          icon: "car-fill",
          word: "待发货",
          url: "/pageA/order/index?current=1&orderStatus=2",
        },
        {
          icon: "bag-fill",
          word: "待收货",
          url: "/pageA/order/index?current=2&orderStatus=3",
        },
        {
          icon: "chat-fill",
          word: "已完成",
          url: "/pageA/order/index?current=3&orderStatus=7",
        },
      ],
      moreFun: [
        {
          icon: "map-fill",
          word: "地址管理",
          url: "/pageA/address/address",
        },
        {
          icon: "coupon-fill",
          word: "我的优惠券",
          url: "/pageA/coupon/index",
        },
        {
          icon: "server-man",
          word: "联系客服",

          onPlate: "onHelp",
        },
        {
          icon: "camera-fill",
          word: "拍照下单",
          url: "/pageA/photo/index",
        },
      ],
    };
  },
  onLoad() {
    this.getUserInfo();
    uni.removeStorageSync("detail1");
  },
  methods: {
    more() {
      uni.navigateTo({
        url: "/pageA/order/index?current=0&orderStatus=1",
      });
    },

    // 获取用户信息
    async getUserInfo() {
      const res = await getUserInfo({
        userId: uni.getStorageSync("mUserinfo").user_id,
      });
      if (res) {
        this.userInfo.name = res.name;
        this.userInfo.mobile = res.phone;
        this.userInfo.avatarUrl = global.baseUrl + res.avatar;
      }
    },
    // 退出登录
    loginOut() {
      uni.showModal({
        title: "退出登录",
        content: "是否退出登录",
        success: function (res) {
          if (res.confirm) {
            uni.reLaunch({
              url: "/pages/login/index",
            });
          } else if (res.cancel) {
          }
        },
      });
    },

    // 登录方法
    login() {
      // 调用微信登录API获取code
      uni.login({
        provider: "weixin",
        success: (loginRes) => {
          console.log(loginRes);
          // 获取到code后，将其传递给后端
          // this.getUserInfo(loginRes.code);
        },
        fail: (err) => {
          console.log("登录失败", err);
        },
      });
    },
    // ...mapMutations(['setLoginPopupShow']),
    openLogin() {
      this.judgeLogin();
    },
    navClick(item) {
      uni.navigateTo({
        url: item.url,
      });
    },
  },
};
</script>

<style>
page {
  background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.myInfo {
  // 这里设置高度，上拉显示菜单栏---正式环境删除
  // min-height: 2000rpx;
}

.headBox {
  // background-color: #FBF7EF;
  position: relative;
  width: 100%;
  height: 280rpx;
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: 30rpx;

  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .user-info {
    display: flex;
    height: 100rpx;
    z-index: 1;

    .user-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 30rpx;

      .nick-name {
        font-size: 34rpx;
        font-weight: bold;
        color: #fff;
        max-width: 300rpx;
      }

      .mobile {
        display: flex;
        align-items: center;
        margin-top: 15rpx;
        font-size: 28rpx;
        color: #eee;
      }
    }
  }
}

.main {
  padding: 0 24rpx;
}

.titleBox {
  display: flex;
  justify-content: space-between;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #eee;

  .title {
    font-size: 30rpx;
    font-weight: 700;
  }

  .more {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999;

    .u-icon {
      // vertical-align:middle;
      margin-left: 5rpx;
    }
  }
}

.itemBox {
  background: #fff;
  padding: 31rpx 24rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.btn {
  margin-top: 60rpx;
  padding: 0 40rpx;
}
</style>
